<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="@/assets/logo.png" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="login_form"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="ruleForm.username"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            suffix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
//核心思路-登录流程
// 1.静态布局 2.根据接口文档,模拟json数据 3.测试接口  4.验证规则:利用elment表单插件,判断验证规则是否通过，如果通过,获取前端用户输入信息,传入接口,发送请求 5.发送接口成功,后台验证数据后返回token，前台做下一步跳转操作，同时提醒用户是否登录成功与失败信息 6.存储token,跳转页面

import { getLogin,menusList } from "@/api/api";
import {fn} from '@/utils/routeList.js'; //生成列表结构路由方法

export default {
  data() {
    return {
      timer: "", //定时器
      ruleForm: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          //elment自带规则
          // { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
          //自定义验证规则
          {
            pattern: /^[a-zA-Z0-9_-]{4,16}$/,
            message: "请输入正确的账号格式长度4到16位字母数字下划线开头",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      //函数防抖,防止用户多次点击提交接口?如果按钮接口比较少时，可以这样，如果项目中有大量点击接口，每个都得写麻烦，可以考虑通过axios的请求拦截器，拦截每次重复请求，给它取消实现。参考网址—axios如何取消重复请求?  https://blog.csdn.net/qq_41809113/article/details/122330451
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$refs[formName].validate(async (valid) => {
          //验证通过
          if (valid) {
            //方法1—直接main.js里挂载axios到vue原型上
            // this.$http.post('/login',this.ruleForm).then(res=>{
            //   console.log(62,res);
            // })

            //方法2-对接口统一封装到http请求里，不同接口路径也封装下，这样便于维护接口
            let res = await getLogin(this.ruleForm);
            if (res.meta.status === 200) {
              this.$message.success(res.meta.msg);
              localStorage.setItem("token", res.data.token);

              //加载动态路由
              // !!!注意-登录后路由表里在次加载一遍动态路由-解决第1次页面点击找不到路径问题,因为路由是动态生成的,登录后路由没有被在次生成，路由表里是空的。所以在路由里要在次生成一遍
              this.loadRoute()

              this.$router.push("/home"); //传参方式query传参{query:'',path:"/home"},params传参{params:'',name:'Home'} name是路由中名字
              
            }
          }
          //验证不通过
          else {
            return false;
          }
        });
      }, 300);
    },
    //重置方法
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //动态路由方法-登录成功后，获取路由表存起来，在生成动态路由时使用
    async loadRoute() {
      //请求左侧路由接口
        let res = await menusList()
      if (res.meta.status === 200) {
        //存储下左侧导航
         localStorage.setItem("menusList", JSON.stringify(res.data))

           //传进去树状路由表-调用递归方法返回列表结构
          let newArr=fn(res.data)
          console.log('路由列表结构1',newArr);
          newArr.forEach(item=>{
              this.$router.addRoute('Home',item)
          })
       }
  
    },

  },
};
</script>
<style lang="scss" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}
</style>